import React, { Component } from "react";

import { connect } from "react-redux";

import { StyleSheet, View, Platform, DeviceEventEmitter } from "react-native";
import TabNavigator from "components/TabNavigator/TabNavigator";
import LinearGradient from "react-native-linear-gradient";
import Iconfont from "components/Iconfont";
import { ColorPrimary, ColorBackgroundComp } from "theme";
import { CZH, CZH_CN } from "language/complex-zh";
import { SZH, SZH_CN } from "language/simple-zh";

import { getStore } from "utils";
import HomePage from "../home/index";
import demoPage from "../demo/index";

const IS_IOS = Platform.OS === "ios";

if (global.__DEV__) {
  //  开发的时候 显示简体把
  // global.lang = SZH;
  // global.lang_cn = SZH_CN;
  global.lang = SZH;
  global.lang_cn = SZH_CN;
} else {
  global.lang = CZH;
  global.lang_cn = CZH_CN;
}

const dataSource2 = [
  {
    icon: "homeUncheck",
    focusedIcon: "homeCheck",
    tabPage: "Home",
    tabName: global.lang.main.home,
    component: HomePage,
  },
  {
    icon: "serveUncheck",
    focusedIcon: "serveCheck",
    tabPage: "Service",
    tabName: global.lang.main.service,
    component: demoPage,
  },
  {
    icon: "logoColor",
    focusedIcon: "logoColor",
    tabPage: "Kefu",
    tabName: global.lang.main.kefu,
    // component: ChatPage,
  },
  {
    icon: "informationUncheck",
    focusedIcon: "informationCheck",
    tabPage: "Info",
    tabName: global.lang.main.ask,
    component: demoPage,
  },
  {
    icon: "mineUncheck",
    focusedIcon: "mineCheck",
    tabPage: "Mine",
    tabName: global.lang.main.mine,
    component: demoPage,
  },
];
class MainPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedTab: "Home",
      dataSource: dataSource2,
    };

    // 读取用户选择的语音
    getStore("lang").then(res => {
      if (res) {
        if (res === "simple") {
          global.lang = SZH;
          global.lang_cn = SZH_CN;
        } else {
          global.lang = CZH;
          global.lang_cn = CZH_CN;
        }
      }
      console.log("res默认语言:", global.lang_cn, res); // eslint-disable-line
      const data = this.init();
      this.setState({ dataSource: data });
    });
  }

  componentWillMount() {
    // 请求token  成功在才能录音
    const { dispatch } = this.props;
    dispatch({
      type: "home/getToken",
    });
    this.listener = DeviceEventEmitter.addListener("NoticeUpdateLocale", () => {
      // 这里面是要调用的方法，比如：刷新
      const data = this.init();
      this.setState({ dataSource: data });
    });
  }

  componentWillUnmount() {
    if (this.listener) {
      this.listener.remove();
    }
  }

  init = () => {
    return [
      {
        icon: "homeUncheck",
        focusedIcon: "homeCheck",
        tabPage: "Home",
        tabName: global.lang.main.home,
        component: HomePage,
      },
      {
        icon: "serveUncheck",
        focusedIcon: "serveCheck",
        tabPage: "Service",
        tabName: global.lang.main.service,
        component: demoPage,
      },
      {
        icon: "logoColor",
        focusedIcon: "logoColor",
        tabPage: "Kefu",
        tabName: global.lang.main.kefu,
      },
      {
        icon: "informationUncheck",
        focusedIcon: "informationCheck",
        tabPage: "Info",
        tabName: global.lang.main.ask,
        component: demoPage,
      },
      {
        icon: "mineUncheck",
        focusedIcon: "mineCheck",
        tabPage: "Mine",
        tabName: global.lang.main.mine,
        component: demoPage,
      },
    ];
  };

  handleKefu = () => {
    // const { dispatch, navigation } = this.props;
    // dispatch({
    //   type: "mine/getUserInfo",
    // }).then(res => {
    //   if (res && res !== undefined && res.errCode === 0) {
    //     navigation.navigate("Chat", {
    //       userId: res.data.phone,
    //       avatar: res.data.profilePhoto || "",
    //     });
    //   } else {
    //     navigation.navigate("Login");
    //   }
    // });
  };

  render() {
    const { selectedTab, dataSource } = this.state;
    const { navigation } = this.props;

    const tabViews = dataSource.map((item, i) => {
      return (
        <TabNavigator.Item
          title={item.tabName}
          selected={selectedTab === item.tabPage}
          titleStyle={{ color: "#9A9FAC" }}
          selectedTitleStyle={{ color: ColorPrimary }}
          renderIcon={() => {
            if (item.tabPage === "Kefu") {
              return (
                <View
                  style={{
                    position: "absolute",
                    left: -25,
                    bottom: -3,
                    justifyContent: "center",
                    alignItems: "center",
                    paddingBottom: 6,
                    // backgroundColor: "#298CF7",
                  }}
                >
                  <LinearGradient
                    colors={["#298CF7", "#0A74E8"]}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 0 }}
                    style={{
                      height: 50,
                      width: 50,
                      borderRadius: 25,
                      overflow: "hidden",
                      flexDirection: "row",
                      alignItems: "center",
                      justifyContent: "center",
                    }}
                  >
                    <Iconfont
                      name={item.icon}
                      type="icon"
                      color="#fff"
                      size={22}
                      style={{ lineHeight: 50 }}
                    />
                  </LinearGradient>
                </View>
              );
            } else {
              return (
                <Iconfont
                  name={item.focusedIcon}
                  type="icon"
                  color="#C7C9D2"
                  size={20}
                />
              );
            }
          }}
          renderSelectedIcon={() => (
            <View>
              <Iconfont
                name={item.focusedIcon}
                type="icon"
                color={ColorPrimary}
                size={20}
              />
            </View>
          )}
          tabStyle={
            item.tabPage === "Kefu"
              ? {
                  position: "relative",
                  bottom: 0,
                  height: 80,
                }
              : {
                  position: "relative",
                  bottom: -32,
                  height: 48,
                  alignItems: "center",
                }
          }
          onPress={() => {
            if (item.tabPage === "Kefu") {
              // 用户信息查询 判断登录
              this.handleKefu();
            } else {
              if (item.tabPage === "Home") {
                DeviceEventEmitter.emit("NoticeHome");
              } else if (item.tabPage === "Service") {
                DeviceEventEmitter.emit("NoticeService");
              } else if (item.tabPage === "Info") {
                DeviceEventEmitter.emit("NoticeInfo");
              } else if (item.tabPage === "Mine") {
                DeviceEventEmitter.emit("NoticeMine");
              }

              this.setState({ selectedTab: item.tabPage });
            }
          }}
          key={i}
        >
          {item.tabPage !== "Kefu" && (
            <item.component navigation={navigation} />
          )}
        </TabNavigator.Item>
      );
    });
    return (
      <View style={styles.container}>
        <TabNavigator tabBarStyle={styles.tabBarStyle} hidesTabTouch>
          {tabViews}
        </TabNavigator>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: ColorBackgroundComp,
  },
  tabBarStyle: {
    bottom: IS_IOS ? 10 : 0,
    borderTopWidth: 0,
    borderBottomWidth: 0,
    backgroundColor: "transparent",
  },
  tabIcon: {
    width: 23,
    height: 23,
  },

  icon: {
    padding: 6,
  },
});

export default connect()(MainPage);
